<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./resources/templates/appTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:define name="firstname">
        <f:view>
            <h:outputText value="#{userSession.user.firstname}"/>
        </f:view>
    </ui:define>
    <ui:define name="lastname">
        <f:view>
            <h:outputText value="#{userSession.user.lastname}"/>
        </f:view>
    </ui:define>
    <ui:define name="email">
        <f:view>
            <h:outputText value="#{userSession.user.email}"/>
        </f:view>
    </ui:define>
    <ui:define name="content">
        <f:view>
            <script type="text/javascript"> 
                //<![CDATA[ 
                this.onload = function() {
                    $("#userID").css("display", "none");
                    $("#userID").fadeIn('slow');
                }
                //]]> 
            </script> 
            <p:panel header="Mes messages" toggleable="true" id="panel">  
                <p:accordionPanel value="#{myMessages.messages}" var="message">  
                    <p:tab title="#{message.notificationDate} - #{message.type}">  
                        <h:panelGrid columns="2" cellpadding="10">  
                            <p:graphicImage width="100px" value="#{message.fromUser.avatar}" />  
                            <h:outputText value="#{message.description}"/> 
                        </h:panelGrid>  
                    </p:tab>  
                </p:accordionPanel>  
            <h:outputText rendered="#{myMessages.messages.size() == 0}" value="Vous n'avez pas de messages."/> 
            </p:panel>
        </f:view>
    </ui:define>
</ui:composition>
